<template>
  <van-row>
    <van-nav-bar
      title="请核对结果，无误则点击确认"
      left-arrow
      @click-left="$emit('close')"
    />
    <van-form @submit="onSubmit">
      <van-field
        readonly
        clickable
        name="outputDate"
        :value="submitForm.outputDate"
        label="日期选择"
        placeholder="点击选择日期"
        input-align="left"
        :rules="[{ required: true, message: '请选择日期' }]"
        @click="showOutputDatePicker = true"
      />
      <van-field
        name="shiftId"
        label="班次"
        input-align="left"
        :rules="[{ required: true, message: '请选择班次' }]"
      >
        <template #input>
          <van-radio-group v-model="submitForm.shiftId" direction="horizontal">
            <div v-for="(i,idx) in shiftList" :key="idx">
              <van-radio :name="i.id">{{ i.name }}</van-radio>
            </div>
          </van-radio-group>
        </template>
      </van-field>
      <van-divider>以下是识别结果，请确认</van-divider>
      <van-list
        v-model="tableLoading"
        finished-text="没有更多了"
        :finished="true"
      >
        <van-cell>
          <template #default>
            <van-row>
              <!--            <van-col class="left" style="padding: 10px 16px" :span="8">编号</van-col>-->
              <van-col class="left" style="padding: 10px 16px" :span="6">编号</van-col>
              <van-col class="center" style="padding: 10px 16px" :span="12">产品名称</van-col>
              <van-col class="left" style="padding: 10px 16px" :span="6">产量</van-col>
            </van-row>
          </template>
        </van-cell>
        <van-cell v-for="(item,index) in submitForm.dataList" :key="index">
          <template #default>
            <van-row>
              <van-col :span="6">
                {{ item.produceNo }}
              </van-col>
              <van-col :span="12">
                {{ item.productName }}
              </van-col>
              <van-col :span="6">
                <van-field
                  v-model="item.quantity"
                  name="产量"
                  placeholder="产量"
                  type="digit"
                  :rules="[{ required: true, message: '请填写产量' }]"
                  input-align="left"
                />
              </van-col>
            </van-row>
          </template>
        </van-cell>
      </van-list>
      <div class="bottom_button">
        <van-button round block type="danger" native-type="submit">确定</van-button>
      </div>
    </van-form>
    <van-calendar v-model="showOutputDatePicker" :min-date="minDate" :show-confirm="false" @confirm="onConfirmOutputDate" />
  </van-row>
</template>

<script>

import moment from 'moment'
import Moment from 'moment/moment'
import { selectAllShift } from '@/api/shift'
import { saveOutputBatch } from '@/api/output'
import { Dialog } from 'vant'

export default {
  name: 'OcrSubmitModule',
  data() {
    return {
      tableLoading: false,
      showOutputDatePicker: false,
      shiftList: [],
      submitForm: {
        outputDate: '',
        shiftId: '',
        dataList: []
      },
      minDate: moment(new Date()).subtract(30, 'years').toDate()
    }
  },
  mounted() {
    this.selectAllShift()
  },
  methods: {
    init(tableData) {
      this.submitForm.dataList = tableData
    },
    onConfirmOutputDate(row) {
      this.submitForm.outputDate = Moment(row).format('YYYY-MM-DD')
      this.showOutputDatePicker = false
    },
    selectAllShift() {
      selectAllShift().then(resp => {
        if (resp.success) {
          this.shiftList = resp.data
        }
      })
    },
    onSubmit() {
      Dialog.confirm({
        title: '提交确认',
        message: '若之前已提交，则本次提交会覆盖之前的内容，余数也会回退重新再扣减'
      }).then(() => {
        saveOutputBatch(this.submitForm).then(resp => {
          if (resp.success) {
            this.$toast.success('操作成功')
            this.$emit('close')
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
